<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :before-close="closeDlg"
    :close-on-click-modal="false"
    destroy-on-close="true"
    style="margin-top: -60px"
    :width="width"
  >
    <div :style="'width: 100%; height: ' + height + ';'" class="scrollbar">
      <el-scrollbar style="height: 100%;">
        <el-table
          ref="dragTable"
          v-loading="listLoading"
          :data="list"
          row-key="ID"
          border
          fit
          highlight-current-row
          height="500px"
          style="width: 100%;"
          :row-class-name="tableClass"
        >
          <!--    列表内容-->
          <!--          <el-table-column v-if="pagePrivilege!==null" type="selection" width="40"></el-table-column>-->
          <el-table-column label="名称" width="" align="" show-overflow-tooltip>
            <template slot-scope="{row}">
              <span>{{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="序号" width="50" align="" show-overflow-tooltip>
            <template slot-scope="{row}">
              <span>{{ row.orderSeq }}</span>
            </template>
          </el-table-column>
          <el-table-column label="编号" width="100" align="" show-overflow-tooltip>
            <template slot-scope="{row}">
              <span>{{ row.code }}</span>
            </template>
          </el-table-column>
          <el-table-column label="指令名称/公式" width="250" align="" show-overflow-tooltip>
            <template slot-scope="{row}">
              <span
                :style="'color: ' +
                  (
                    (row.autoType === 1 || row.autoType === 4) ?
                      '#aa1111' :
                      (row.autoType === 2 || row.autoType === 3) ?
                        '#00bb00' :
                        row.autoType === 5 ?
                          '#ff6922' :
                          '#000000'
                  )"
              >
                {{ row.commandName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="指令参数" width="150" align="" show-overflow-tooltip>
            <template slot-scope="{row}">
              <span
                :style="'color: ' +
                  (
                    (row.autoType === 1 || row.autoType === 4) ?
                      '#aa1111' :
                      (row.autoType === 2 || row.autoType === 3) ?
                        '#00bb00' :
                        row.autoType === 5 ?
                          '#ff6922' :
                          '#000000'
                  )"
              >
                {{ row.commandParameter }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="阶段类型" width="80" align="">
            <template slot-scope="{row}">
              <span
                :style="'color: ' +
                  (
                    row.executionType === 1 ? '#00bb00' : row.executionType === 3 ? '#aa1111' : '#000000'
                  )"
              >
                {{ row.executionType | executionTypeFilter }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作类型" width="80" align="">
            <template slot-scope="{row}">
              <span
                :style="'color: ' +
                  (
                    row.actionType === 2 ? '#aa1111' : row.actionType === 1 ? '#00bb00' : '#000000'
                  )"
              >
                {{ row.actionType | actionTypeFilter }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="自动执行类型" width="100" align="">
            <template slot-scope="{row}">
              <span
                :style="'color: ' +
                  (
                    (row.autoType === 1 || row.autoType === 4) ?
                      '#aa1111' :
                      (row.autoType === 2 || row.autoType === 3) ?
                        '#00bb00' :
                        row.autoType === 5 ?
                          '#ff6922' :
                          '#000000'
                  )"
              >
                {{ row.autoType | autoTypeFilter }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="循环" width="70" align="">
            <template slot-scope="{row}">
              <span>{{ row.loopType | loopTypeFilter }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="pagePrivilege!==null" label="人工" width="50" align="">
            <template slot-scope="{row}">
              <span
                :style="'color: ' + (row.isNeedConfirm === 1 ? '#00bb00' : '#aa1111')"
              >
                {{ row.isNeedConfirm === 1 ? '是' : row.isNeedConfirm === 0 ? '否' : '' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.actions')" align="" width="80" class-name="small-padding fixed-width">
            <template slot-scope="{row}">
              <!--                <el-button type="primary" size="mini" @click="handleUpdate(row)">-->
              <!--                  {{ $t('table.edit') }}-->
              <!--                </el-button>-->
              <!--              <el-button size="mini" type="danger" @click="handleDelete(row)">-->
              <!--                {{ $t('table.delete') }}-->
              <!--              </el-button>-->
              <img
                class="listIcon"
                title="编辑"
                :src="listIcon.update"
                alt=""
                @click="handleUpdate(row)"
              />
              <img
                class="listIcon"
                title="删除"
                :src="listIcon.delete"
                alt=""
                @click="handleDelete(row)"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </div>
    <!--    分页-->
    <!--    <pagination v-show="total>0" :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageNumber" @pagination="getUserList" />-->

    <br><br>
    <span class="el-dialog__title">任务定义步骤</span>
    <div style="width: 100%; height: 410px; padding-top: 20px; margin-top: 30px; border: 1px solid #dfe6ec" class="scrollbar">
      <el-scrollbar style="height: 100%;">
        <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="120px" style="margin-left:-5px;">
          <el-row>
            <el-col :span="12">
              <el-form-item label="名称" prop="name">
                <el-input v-model="temp.name" placeholder="名称" style="width: 450px;" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="简称" prop="shortName">
                <el-input v-model="temp.shortName" placeholder="简称" style="width: 160px;" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="编码" prop="code">
                <el-input v-model="temp.code" placeholder="编码" style="width: 160px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="描述" prop="description">
            <el-input v-model="temp.description" type="textarea" :autosize="{ minRows: 4, maxRows: 8}" placeholder="描述" style="width: 1032px;" />
          </el-form-item>

          <el-row>
            <el-col :span="6">
              <el-form-item label="阶段类型" prop="executionType">
                <el-select v-model="temp.executionType" class="filter-item" clearable filterable placeholder="阶段类型" style="width: 160px;">
                  <el-option v-for="item in executionTypes" :key="item.key" :label="item.display_name" :value="item.key" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="操作类型" prop="actionType">
                <el-select v-model="temp.actionType" class="filter-item" clearable filterable placeholder="请选择操作类型" style="width: 160px;">
                  <el-option v-for="item in actionTypes" :key="item.key" :label="item.display_name" :value="item.key" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="自动执行类型"
                prop="autoType"
                :rules="temp.actionType === 2 ? [{ required: temp.actionType === 2, message: '自动执行类型不能为空', trigger: 'blur' }] : null"
              >
                <el-select v-model="temp.autoType" class="filter-item" clearable filterable placeholder="请选择自动执行类型" style="width: 160px;">
                  <el-option v-for="item in autoTypes" :key="item.key" :label="item.display_name" :value="item.key" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="循环指令类型" prop="loopType">
                <el-select
                  v-model="temp.loopType"
                  class="filter-item"
                  style="width: 160px;"
                  placeholder="请选择循环指令类型"
                  clearable
                  filterable
                >
                  <el-option v-for="item in loopTypes" :key="item.key" :label="item.display_name" :value="item.key" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6">
              <el-form-item
                label="链路类型"
                prop="chainType"
              >
                <el-select v-model="temp.chainType" class="filter-item" clearable filterable placeholder="请选择链路类型" style="width: 160px;">
                  <el-option v-for="item in chainTypes" :key="item.key" :label="item.display_name" :value="item.key" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="仪器类型" prop="instrumentType">
                <el-select
                  ref="instrumentType"
                  v-model="temp.instrumentType"
                  class="filter-item"
                  style="width: 160px;"
                  placeholder="请选择仪器类型"
                  clearable
                  filterable
                  @change="makeInstrumentAttributeDefine"
                >
                  <el-option v-for="item in instrumentTypes" :key="item.key" :label="item.display_name" :value="item.key" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="仪器链路类型" prop="instrumentChainType">
                <el-select v-model="temp.instrumentChainType" class="filter-item" clearable filterable placeholder="请选择仪器链路类型" style="width: 160px;">
                  <el-option v-for="item in instrumentChainTypes" :key="item.key" :label="item.display_name" :value="item.key" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="需要人工确认" prop="isNeedConfirm">
                <!--                <el-radio v-model="temp.isNeedConfirm" :label="1">是</el-radio>-->
                <!--                <el-radio v-model="temp.isNeedConfirm" :label="0">否</el-radio>-->
                <el-switch
                  v-model="temp.isNeedConfirm"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6">
              <el-form-item
                label="地面站"
                prop="stationID"
              >
                <el-select
                  ref="stationID"
                  v-model="temp.stationID"
                  class="filter-item"
                  style="width: 160px;"
                  placeholder="请选择地面站"
                  clearable
                  filterable
                  @change="makeChainListByStationID(),makeInstrumentListByStationID()"
                  @click.native="LoadStationList"
                >
                  <el-option v-for="item in stationList" :key="item.ID" :label="item.name" :value="item.ID" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="链路"
                prop="chainID"
              >
                <el-select
                  ref="chainID"
                  v-model="temp.chainID"
                  class="filter-item"
                  style="width: 160px;"
                  placeholder="请选择链路"
                  clearable
                  filterable
                  @click.native="LoadChainList"
                >
                  <el-option v-for="item in chainList" :key="item.ID" :label="item.name" :value="item.ID" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="仪器"
                prop="instrumentID"
<!--                :rules="temp.actionType === 2 ?-->
<!--                  [{ required: temp.actionType === 2 && temp.autoType !== 5, message: '仪器不能为空', trigger: 'blur' }] :-->
<!--                  null"-->
              >
                <el-select
                  ref="instrumentID"
                  v-model="temp.instrumentID"
                  class="filter-item"
                  style="width: 160px;"
                  placeholder="请选择仪器"
                  clearable
                  filterable
                  @click.native="LoadInstrumentList"
                >
                  <el-option v-for="item in instrumentList" :key="item.ID" :label="item.name" :value="item.instrumentID" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                :rules="temp.instrumentType === 5 ?
                  [{ required: temp.instrumentType === 5, message: '功率计通道不能为空', trigger: 'blur' }] :
                  null"
                label="仪器编号/通道"
                prop="powerChannel"
              >
                <el-input-number v-model="temp.powerChannel" placeholder="仪器编号/通道" :min="temp.instrumentType === 5 ? 1 : 0" :max="temp.instrumentType === 5 ? 4 : 100" style="width: 160px;" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item
                label="仪器属性定义"
                prop="instrumentAttributeDefineID"
                :rules="temp.actionType === 2 ? [{ required: temp.autoType === 1, message: '仪器属性定义不能为空', trigger: 'blur' }] : null"
              >
                <el-select
                  ref="instrumentAttributeDefineID"
                  v-model="temp.instrumentAttributeDefineID"
                  class="filter-item"
                  style="width: 450px;"
                  placeholder="请选择仪器属性定义"
                  clearable
                  filterable
                  @change="makeCommandName"
                  @click.native="LoadInstrumentAttributeDefineList"
                >
                  <el-option v-for="item in instrumentAttributeDefineList" :key="item.ID" :label="item.name+' '+(item.commandName!==null?'【'+item.commandName+'】':'')" :value="item.ID" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="指令名称/公式" prop="commandName" :rules="temp.autoType === 4 ? [{ required: temp.autoType === 4, message: '指令名称/公式不能为空', trigger: 'blur' }] : null">
                <el-input v-model="temp.commandName" placeholder="指令名称/公式" style="width: 450px;" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="指令参数" prop="commandParameter">
                <el-input v-model="temp.commandParameter" placeholder="指令参数" style="width: 450px;" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="语句定义"
                prop="sentenceID"
              >
                <el-select
                  ref="sentenceID"
                  v-model="temp.sentenceID"
                  class="filter-item"
                  style="width: 160px;"
                  placeholder="请选择语句定义"
                  clearable
                  filterable
                  @click.native="LoadSentenceList"
                >
                  <el-option v-for="item in sentenceList" :key="item.ID" :label="item.name" :value="item.ID" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="测量指标定义" prop="indicatorID">
                <el-select
                  ref="indicatorID"
                  v-model="temp.indicatorID"
                  class="filter-item"
                  style="width: 160px;"
                  placeholder="请选择测量指标定义"
                  clearable
                  filterable
                  @click.native="LoadIndicatorList"
                >
                  <el-option v-for="item in indicatorList" :key="item.ID" :label="item.name" :value="item.ID" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6">
              <el-form-item label="等待毫秒" prop="waitMS">
                <el-input
                  v-model="temp.waitMS"
                  placeholder="等待毫秒"
                  style="width: 160px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="延迟毫秒" prop="delayMS">
                <el-input
                  v-model="temp.delayMS"
                  placeholder="延迟毫秒"
                  style="width: 160px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="temp.autoType===7">
              <el-form-item label="器件类型" prop="partType" :rules="temp.autoType === 7 ? [{ required: temp.autoType === 7, message: '器件类型不能为空', trigger: 'blur' }] : null">
                <el-select v-model="temp.partType" class="filter-item" clearable placeholder="请选择器件类型"
                           style="width: 80%;">
                  <el-option v-for="item in partTypes" :key="item.key" :label="item.display_name" :value="item.key"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!--          <div style="float: right;margin-bottom: 10px;margin-right: 30px;">-->
          <!--          </div>-->
        </el-form>
      </el-scrollbar>
    </div>
    <!--    对话框下方按钮-->
    <div slot="footer" class="dialog-footer">
      <!--    取消按钮-->
      <!--      <el-button @click="closeDlg">-->
      <!--        {{ $t('table.cancel') }}-->
      <!--      </el-button>-->

      <!--    提交按钮-->
      <el-button v-if="dialogStatus==='update'" type="danger" icon="el-icon-close" @click="handleCancel">
        取消
      </el-button>
      <el-button v-if="dialogStatus==='update'" type="success" icon="el-icon-document-copy" @click="createData(1)">
        数据另存为
      </el-button>
      <el-button
        :type="dialogStatus === 'update'?'primary':'success'"
        :icon="dialogStatus === 'update'?'el-icon-edit':''"
        @click="dialogStatus==='update'?updateData():createData()"
      >
        {{ dialogStatus==='update' ? '编辑' : '创建' }}
      </el-button>
      <el-button type="warning" @click="closeDlg">
        关闭
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { isNotEmpty, zEnBase64 } from '@/utils'
import { getToken } from '@/utils/auth'
import global from '@/common'
import Sortable from 'sortablejs'
import { doFormula } from '@/api/weixing/sentence'
import {
  batchSortTaskDefineStep,
  createTaskDefineStep,
  deleteTaskDefineStep,
  fetchTaskDefineStepOne,
  updateTaskDefineStep
} from '@/api/weixing/taskDefineStep'
import option from '@/common/weixing/option'
import {
  getInstrumentAttributeDefineList,
  getSentenceList,
  getChainList,
  getInstrumentList,
  getIndicatorList,
  getTaskDefineStepList,
  getStationList, getTaskDefineList, getChainInstrumentList
} from '@/api/weixing/base'

const partTypes = option.partTypes

const executionTypes = option.executionTypes
const actionTypes = option.actionTypes
const autoTypes = option.autoTypes
const chainTypes = option.chainTypes
const instrumentTypes = option.instrumentTypes
const instrumentChainTypes = option.instrumentChainTypes
const loopTypes = option.loopTypes
const executionTypesValue = executionTypes.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})
const actionTypesValue = actionTypes.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})
const autoTypesValue = autoTypes.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})
const instrumentTypesValue = instrumentTypes.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})
const loopTypesValue = loopTypes.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})

export default {
  name: 'TaskDefineStep',
  filters: {
    executionTypeFilter(executionType) {
      return executionTypesValue[executionType]
    },
    instrumentTypeFilter(instrumentType) {
      return instrumentTypesValue[instrumentType]
    },
    actionTypeFilter(actionType) {
      return actionTypesValue[actionType]
    },
    autoTypeFilter(autoType) {
      return autoTypesValue[autoType]
    },
    loopTypeFilter(loopType) {
      return loopTypesValue[loopType]
    }
  },
  props: {
    width: {
      type: String,
      default: '1360px'
    },
    height: {
      type: String,
      default: '500px'
    },
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '任务定义步骤列表'
    },
    row: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      list: null, // 列表数据
      listLoading: true, // 列表状态为加载中
      loadingBtn: false, // 防止表单重复提交
      loadingBtnTitle: '确定', // 提交按钮标题
      dialogStatus: 'create',
      listIcon: global.listIcon, // 列表按钮图标
      sentenceList: [],
      indicatorList: [],
      stationList: [],
      instrumentAttributeDefineList: [],
      chainList: [],
      instrumentList: [],
      distanceSentence: '',
      partTypes,
      actionTypes,
      executionTypes,
      autoTypes,
      chainTypes,
      instrumentTypes,
      instrumentChainTypes,
      loopTypes,
      rules: {
        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        executionType: [{ required: true, message: '阶段类型不能为空', trigger: 'blur' }],
        actionType: [{ required: true, message: '操作类型不能为空', trigger: 'blur' }]
      },
      temp: {
        ID: '',
        applicationID: '',
        organizationID: '',
        satelliteID: '',
        projectID: '',
        taskDefineID: '',
        name: '',
        shortName: '',
        code: '',
        description: '',
        orderSeq: '',
        executionType: 3,
        actionType: 2,
        autoType: '',
        chainType: '',
        stationID: '',
        chainID: '',
        instrumentType: '',
        instrumentChainType: '',
        instrumentID: '',
        powerChannel: 1,
        instrumentAttributeDefineID: '',
        loopType: 1,
        commandName: '',
        commandParameter: '',
        sentenceID: '',
        indicatorID: '',
        isNeedConfirm: false,
        waitMS: '',
        delayMS: '',
        partType: ''
      },
      sortable: null,
      oldList: [],
      newList: []
    }
  },
  created() {
    console.log(this.row)
    this.title = '任务定义步骤列表【' + this.row.name + '】'
    this.getList()
  },
  methods: {
    resetTemp() {
      this.temp = {
        ID: '',
        applicationID: '',
        organizationID: '',
        satelliteID: '',
        projectID: '',
        taskDefineID: '',
        name: '',
        shortName: '',
        code: '',
        description: '',
        orderSeq: '',
        executionType: 3,
        actionType: 2,
        autoType: '',
        chainType: '',
        stationID: '',
        chainID: '',
        instrumentType: '',
        instrumentChainType: '',
        instrumentID: '',
        powerChannel: 1,
        instrumentAttributeDefineID: '',
        loopType: 1,
        commandName: '',
        commandParameter: '',
        sentenceID: '',
        indicatorID: '',
        isNeedConfirm: false,
        waitMS: '',
        delayMS: '',
        partType: ''
      }
    },
    LoadList() {
      this.LoadStationList()
      this.LoadSentenceList()
      this.LoadIndicatorList()
      this.LoadInstrumentAttributeDefineList()
      this.LoadChainList()
      this.LoadInstrumentList()
    },
    LoadSentenceList() {
      getSentenceList('applicationID=' + this.$store.state.user.info.applicationID).then(response => {
        if (response.header.code === 0) {
          this.sentenceList = response.body.data.rows
        }
      })
    },
    LoadIndicatorList() {
      getIndicatorList('applicationID=' + this.$store.state.user.info.applicationID).then(response => {
        this.indicatorList = response.body.data.rows
      })
    },
    LoadStationList() {
      // getStationList('applicationID=' + this.$store.state.user.info.applicationID).then(response => {
      //   if (response.header.code === 0) {
      //     this.stationList = response.body.data.rows
      //   }
      // })
      var data1 = ''
      getTaskDefineList('ID=' + this.row.ID , 'sendStationID,receiveStationID').then(response => {
        data1 = response.body.data.rows
        getStationList('ID=' + data1[0].sendStationID).then(response => {
          this.stationList = response.body.data.rows
          getStationList('ID=' + data1[0].receiveStationID).then(response => {
            this.stationList = this.stationList.concat(response.body.data.rows)
          })
        })
      })
    },
    LoadInstrumentAttributeDefineList() {
      let parmas = ''
      if (isNotEmpty(this.temp.instrumentType)) {
        parmas = 'instrumentType=' + this.temp.instrumentType
      }
      getInstrumentAttributeDefineList(parmas, 'code,commandName').then(response => {
        if (response.header.code === 0) {
          this.instrumentAttributeDefineList = response.body.data.rows
        }
      })
    },
    LoadChainList() {
      if (isNotEmpty(this.temp.stationID)) {
        this.chainList = []
        getChainList('stationID=' + this.temp.stationID
        ).then(response => {
          this.chainList = response.body.data.rows
        })
      }
    },
    // LoadInstrumentList() {
    //   if (isNotEmpty(this.temp.stationID)) {
    //     this.instrumentList = []
    //     let params = 'stationID=' + this.temp.stationID
    //     if (isNotEmpty(this.temp.instrumentType)) {
    //       params += ',instrumentType=' + this.temp.instrumentType
    //     }
    //     getInstrumentList(params).then(response => {
    //       this.instrumentList = response.body.data.rows
    //     })
    //   }
    // },
    LoadInstrumentList() {
      if (isNotEmpty(this.temp.chainID)) {
        this.instrumentList = []
        // let params = 'chainID=' + this.temp.chainID
        // if (isNotEmpty(this.temp.instrumentType)) {
        //   params += ',instrumentType=' + this.temp.instrumentType
        // }
        getChainInstrumentList('chainID=' + this.temp.chainID ,'instrumentID').then(response => {
          this.instrumentList = response.body.data.rows
        })
        // getInstrumentList(params).then(response => {
        //   this.instrumentList = response.body.data.rows
        // })
      }
    },
    // 加载列表
    getList() {
      this.listLoading = true
      getTaskDefineStepList('applicationID=' + this.row.applicationID +
        ',organizationID=' + this.row.organizationID +
        ',taskDefineID=' + this.row.ID, 'orderSeq,' +
        'executionType,actionType,autoType,code,chainType,instrumentType,instrumentChainType,loopType,isNeedConfirm,' +
        'commandName,commandParameter'
      ).then((response) => {
        this.list = response.body.data.rows
        if (this.list.length > 0) {
          this.oldList = this.list.map(v => v.ID)
          this.newList = this.oldList.slice()
          this.temp.orderSeq = this.list[this.list.length - 1].orderSeq
        } else {
          this.temp.orderSeq = 0
        }
        this.listLoading = false
        this.$nextTick(() => {
          this.setSort()
        })
      })
    },
    setSort() {
      const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
        setData: function(dataTransfer) {
          // to avoid Firefox bug
          // Detail see : https://github.com/RubaXa/Sortable/issues/1012
          dataTransfer.setData('Text', '')
        },
        onEnd: evt => {
          const targetRow = this.list.splice(evt.oldIndex, 1)[0]
          this.list.splice(evt.newIndex, 0, targetRow)

          // for show the changes, you can delete in you code
          const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
          this.newList.splice(evt.newIndex, 0, tempIndex)
          const ids = this.newList.map(item => item).join()
          const params = { token: getToken(), ids: ids, functionID: global.functionID }
          batchSortTaskDefineStep(params).then(response => {
            if (response.header.code === 0) {
              this.getList()
              // this.$notify({ title: '批量排序成功', message: '批量排序成功', duration: global.notify.durationShort })
            } else {
              this.$notify({ title: '批量排序失败', message: response.header.msg, type: 'error', duration: global.notify.duration })
            }
          }).catch(err => {
            console.error(err)
          })
          console.log(this.newList)
        }
      })
    },
    // 创建
    createData(type) {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loadingBtn = true // 提交按钮不可用
          this.loadingBtnTitle = '提交中...'
          let params = ''
          params += 'name=' + zEnBase64(this.temp.name)
          if (isNotEmpty(this.row.applicationID)) { params += ',applicationID=' + zEnBase64(this.row.applicationID) }
          if (isNotEmpty(this.row.organizationID)) { params += ',organizationID=' + zEnBase64(this.row.organizationID) }
          if (isNotEmpty(this.row.satelliteID)) { params += ',satelliteID=' + zEnBase64(this.row.satelliteID) }
          if (isNotEmpty(this.row.projectID)) { params += ',projectID=' + zEnBase64(this.row.projectID) }
          if (isNotEmpty(this.row.ID)) { params += ',taskDefineID=' + zEnBase64(this.row.ID) }
          if (isNotEmpty(this.temp.shortName)) { params += ',shortName=' + zEnBase64(this.temp.shortName) }
          if (isNotEmpty(this.temp.code)) { params += ',code=' + zEnBase64(this.temp.code) }
          if (isNotEmpty(this.temp.description)) { params += ',description=' + zEnBase64(this.temp.description) }
          if (type === 1) {
            // this.temp.orderSeq = this.list[this.list.length - 1].orderSeq
            --this.temp.orderSeq
          }
          if (isNotEmpty(this.temp.orderSeq)) { params += ',orderSeq=' + zEnBase64(++this.temp.orderSeq) }
          if (isNotEmpty(this.temp.executionType)) { params += ',executionType=' + zEnBase64(this.temp.executionType) }
          if (isNotEmpty(this.temp.actionType)) { params += ',actionType=' + zEnBase64(this.temp.actionType) }
          if (isNotEmpty(this.temp.autoType)) { params += ',autoType=' + zEnBase64(this.temp.autoType) }
          if (isNotEmpty(this.temp.chainType)) { params += ',chainType=' + zEnBase64(this.temp.chainType) }
          if (isNotEmpty(this.temp.stationID)) { params += ',stationID=' + zEnBase64(this.temp.stationID) }
          if (isNotEmpty(this.temp.chainID)) { params += ',chainID=' + zEnBase64(this.temp.chainID) }
          if (isNotEmpty(this.temp.instrumentType)) { params += ',instrumentType=' + zEnBase64(this.temp.instrumentType) }
          if (isNotEmpty(this.temp.instrumentChainType)) { params += ',instrumentChainType=' + zEnBase64(this.temp.instrumentChainType) }
          if (isNotEmpty(this.temp.instrumentID)) { params += ',instrumentID=' + zEnBase64(this.temp.instrumentID) }
          if (isNotEmpty(this.temp.powerChannel)) { params += ',powerChannel=' + zEnBase64(this.temp.powerChannel) }
          if (isNotEmpty(this.temp.instrumentAttributeDefineID)) { params += ',instrumentAttributeDefineID=' + zEnBase64(this.temp.instrumentAttributeDefineID) }
          if (isNotEmpty(this.temp.loopType)) { params += ',loopType=' + zEnBase64(this.temp.loopType) }
          if (isNotEmpty(this.temp.commandName)) { params += ',commandName=' + zEnBase64(this.temp.commandName) }
          if (isNotEmpty(this.temp.commandParameter)) { params += ',commandParameter=' + zEnBase64(this.temp.commandParameter) }
          if (isNotEmpty(this.temp.sentenceID)) { params += ',sentenceID=' + zEnBase64(this.temp.sentenceID) }
          if (isNotEmpty(this.temp.indicatorID)) { params += ',indicatorID=' + zEnBase64(this.temp.indicatorID) }
          if (isNotEmpty(this.temp.waitMS)) { params += ',waitMS=' + zEnBase64(this.temp.waitMS) }
          if (isNotEmpty(this.temp.delayMS)) { params += ',delayMS=' + zEnBase64(this.temp.delayMS) }
          if (isNotEmpty(this.temp.isNeedConfirm)) { params += ',isNeedConfirm=' + zEnBase64(this.temp.isNeedConfirm ? '1' : '0') }
          if (isNotEmpty(this.temp.partType)) { params += ',partType=' + zEnBase64(this.temp.partType) }
          const data = { token: getToken(), parameterArray: params, functionID: global.functionID }
          createTaskDefineStep(data).then(response => {
            if (response.header.code === 0) {
              this.getList()
              this.dialogFormVisible = false // 关闭对话框
              // this.$notify({ title: '创建成功', message: this.temp.shortName, type: 'success', duration: global.notify.durationShort })
              this.dialogStatus = 'create'
              this.resetTemp()
              this.LoadList()
            } else {
              this.loadingBtn = false // 提交按钮可用
              this.loadingBtnTitle = '确定'
              this.$notify({ title: '创建失败', message: response.header.msg, type: 'error', duration: global.notify.duration })
            }
          }).catch(err => {
            this.loadingBtn = false // 提交按钮可用
            this.loadingBtnTitle = '确定'
            console.error(err)
          })
        }
      })
    },
    // 删除
    handleDelete(row) {
      this.$confirm('是否确认删除 ' + row.name + '?', {
        type: 'warning',
        closeOnClickModal: false, // 点击区域外不可关闭
        closeOnPressEscape: false // 按ESC不可关闭
      }).then(() => {
        const params = { token: getToken(), parameterArray: 'ID=' + row.ID, functionID: global.functionID }
        deleteTaskDefineStep(params).then(response => {
          if (response.header.code === 0) {
            this.getList()
            // this.$notify({ title: '删除成功', message: row.name, type: 'success', duration: global.notify.durationShort })
          } else {
            this.$notify({ title: '删除失败', message: response.header.msg, type: 'error', duration: global.notify.duration })
          }
        }).catch(err => {
          console.error(err)
        })
      })
    },
    // 显示编辑对话框，获取当前点击记录的信息
    handleUpdate(row) {
      this.loadingBtn = false // 提交按钮可用
      this.loadingBtnTitle = '确定'
      const params = { token: getToken(), ID: row.ID, functionID: global.functionID }
      fetchTaskDefineStepOne(params).then(response => {
        if (response.header.code === 0) {
          this.temp = response.body.data
          this.temp.isNeedConfirm = (this.temp.isNeedConfirm === 1)
          this.LoadList()
          this.dialogStatus = 'update'
          // this.dialogFormVisible = true // 显示对话框
          this.loadingBtn = false // 提交按钮可用
          this.$nextTick(() => {
            this.$refs['dataForm'].clearValidate()
          })
        } else {
          this.$notify({ title: '获取数据失败', message: response.header.msg, type: 'error', duration: global.notify.duration })
        }
      }).catch(err => {
        console.error(err)
      })
    },
    // 编辑
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loadingBtn = true // 提交按钮不可用
          this.loadingBtnTitle = '提交中...'
          let params = ''
          params += 'ID=' + this.temp.ID
          params += ',applicationID=' + (isNotEmpty(this.row.applicationID) ? zEnBase64(this.row.applicationID) : '')
          params += ',organizationID=' + (isNotEmpty(this.row.organizationID) ? zEnBase64(this.row.organizationID) : '')
          params += ',satelliteID=' + (isNotEmpty(this.row.satelliteID) ? zEnBase64(this.row.satelliteID) : '')
          params += ',projectID=' + (isNotEmpty(this.row.projectID) ? zEnBase64(this.row.projectID) : '')
          params += ',taskDefineID=' + (isNotEmpty(this.row.ID) ? zEnBase64(this.row.ID) : '')
          params += ',name=' + (isNotEmpty(this.temp.name) ? zEnBase64(this.temp.name) : '')
          params += ',shortName=' + (isNotEmpty(this.temp.shortName) ? zEnBase64(this.temp.shortName) : '')
          params += ',code=' + (isNotEmpty(this.temp.code) ? zEnBase64(this.temp.code) : '')
          params += ',description=' + (isNotEmpty(this.temp.description) ? zEnBase64(this.temp.description) : '')
          params += ',orderSeq=' + (isNotEmpty(this.temp.orderSeq) ? zEnBase64(this.temp.orderSeq) : '')
          params += ',executionType=' + (isNotEmpty(this.temp.executionType) ? zEnBase64(this.temp.executionType) : '')
          params += ',actionType=' + (isNotEmpty(this.temp.actionType) ? zEnBase64(this.temp.actionType) : '')
          params += ',autoType=' + (isNotEmpty(this.temp.autoType) ? zEnBase64(this.temp.autoType) : '')
          params += ',chainType=' + (isNotEmpty(this.temp.chainType) ? zEnBase64(this.temp.chainType) : '')
          params += ',stationID=' + (isNotEmpty(this.temp.stationID) ? zEnBase64(this.temp.stationID) : '')
          params += ',chainID=' + (isNotEmpty(this.temp.chainID) ? zEnBase64(this.temp.chainID) : '')
          params += ',instrumentType=' + (isNotEmpty(this.temp.instrumentType) ? zEnBase64(this.temp.instrumentType) : '')
          params += ',instrumentChainType=' + (isNotEmpty(this.temp.instrumentChainType) ? zEnBase64(this.temp.instrumentChainType) : '')
          params += ',instrumentID=' + (isNotEmpty(this.temp.instrumentID) ? zEnBase64(this.temp.instrumentID) : '')
          params += ',powerChannel=' + (isNotEmpty(this.temp.powerChannel) ? zEnBase64(this.temp.powerChannel) : '')
          params += ',instrumentAttributeDefineID=' + (isNotEmpty(this.temp.instrumentAttributeDefineID) ? zEnBase64(this.temp.instrumentAttributeDefineID) : '')
          params += ',loopType=' + (isNotEmpty(this.temp.loopType) ? zEnBase64(this.temp.loopType) : '')
          params += ',commandName=' + (isNotEmpty(this.temp.commandName) ? zEnBase64(this.temp.commandName) : '')
          params += ',commandParameter=' + (isNotEmpty(this.temp.commandParameter) ? zEnBase64(this.temp.commandParameter) : '')
          params += ',sentenceID=' + (isNotEmpty(this.temp.sentenceID) ? zEnBase64(this.temp.sentenceID) : '')
          params += ',indicatorID=' + (isNotEmpty(this.temp.indicatorID) ? zEnBase64(this.temp.indicatorID) : '')
          params += ',waitMS=' + (isNotEmpty(this.temp.waitMS) ? zEnBase64(this.temp.waitMS) : '')
          params += ',delayMS=' + (isNotEmpty(this.temp.delayMS) ? zEnBase64(this.temp.delayMS) : '')
          params += ',partType=' + (isNotEmpty(this.temp.partType) ? zEnBase64(this.temp.partType) : '')
          params += ',isNeedConfirm=' + (isNotEmpty(this.temp.isNeedConfirm) ? zEnBase64(this.temp.isNeedConfirm ? '1' : '0') : '')
          const data = { token: getToken(), parameterArray: params, functionID: global.functionID }
          updateTaskDefineStep(data).then(response => {
            if (response.header.code === 0) {
              this.getList()
              // this.dialogFormVisible = false
              this.dialogStatus = 'create'
              this.resetTemp()
              this.LoadList()
              // this.$notify({ title: '更新成功', message: this.temp.name, type: 'success', duration: global.notify.durationShort })
            } else {
              this.loadingBtn = false // 提交按钮可用
              this.loadingBtnTitle = '确定'
              this.$notify({ title: '更新失败', message: response.header.msg, type: 'error', duration: global.notify.duration })
            }
          }).catch(err => {
            this.loadingBtn = false // 提交按钮可用
            this.loadingBtnTitle = '确定'
            console.error(err)
          })
        }
      })
    },
    handleCancel() {
      this.resetTemp()
      this.dialogStatus = 'create'
    },
    closeDlg() {
      this.visible = false
      this.$parent.taskDefineStepVisible = false
    },
    common_event(event_name, index) {
      if (isNotEmpty(event_name)) {
        this[event_name](index)
      }
    },
    countDistance() {
      if (isNotEmpty(this.temp.satelliteID)) {
        let stationID = this.row.ID
        if (this.dialogStatus === 'update') {
          stationID = this.temp.stationID
        }
        doFormula({
          token: getToken(),
          mathematicalFormula: this.distanceSentence,
          parameterIDArray: 'stationID=' + stationID +
            ',satellite=' + this.temp.satelliteID
        }).then(response => {
          this.temp.distance = response.body.calculationResult.toFixed(2)
        })
      }
    },
    makeInstrumentAttributeDefine() {
      this.$nextTick(() => {
        let params = ''
        if (isNotEmpty(this.$refs.instrumentType.value)) {
          params = 'instrumentType=' + this.$refs.instrumentType.value
        } else {
          getInstrumentAttributeDefineList(params, 'code,commandName').then(response => {
            if (response.header.code === 0) {
              this.instrumentAttributeDefineList = response.body.data.rows
            }
          })
          // this.temp.instrumentAttributeDefineID = ''
        }
      })
    },
    makeCommandName() {
      this.$nextTick(() => {
        if (isNotEmpty(this.$refs.instrumentAttributeDefineID.value)) {
          this.temp.commandName = this.instrumentAttributeDefineList.filter(ele => ele.ID === this.$refs.instrumentAttributeDefineID.value)[0].commandName
        }
      })
    },
    makeChainListByStationID() {
      this.$nextTick(() => {
        if (isNotEmpty(this.$refs.stationID.value)) {
          this.chainList = []
          getChainList('stationID=' + this.$refs.stationID.value
          ).then(response => {
            this.chainList = response.body.data.rows
          })
        } else {
          this.chainList = []
          this.temp.chainID = ''
        }
      })
    },
    makeInstrumentListByStationID() {
      this.$nextTick(() => {
        if (isNotEmpty(this.$refs.stationID.value)) {
          this.instrumentList = []
          let params = 'stationID=' + this.$refs.stationID.value
          if (isNotEmpty(this.$refs.instrumentType.value)) {
            params += ',instrumentType=' + this.$refs.instrumentType.value
          }
          getInstrumentList(params).then(response => {
            this.instrumentList = response.body.data.rows
          })
        } else {
          this.instrumentList = []
          this.temp.instrumentID = ''
        }
      })
    },
    tableClass({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'yellow2'
      }
      return ''
    }
  }
}
</script>
<!---->
<style>
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .sortable-ghost{
    opacity: .8;
    color: #fff!important;
    background: #42b983!important;
  }
</style>

<style scoped>
  .icon-star{
    margin-right:2px;
  }
  .drag-handler{
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  .show-d{
    margin-top: 15px;
  }
</style>
<style>
  .el-table .yellow {
    background: #fdf9f0;
  }
  .el-table .yellow2 {
    background: #fdfbf7;
  }
</style>
